<template>
	<el-container>
		<el-aside width="200px" style="background-color: #f2f7ff;">
			<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
				<el-radio-button :label="false" style="width: 100px;"><i
						style="width: 100px;height: 40px;display: flex;justify-content: center;align-items: center;font-size: 30px;"
						class="el-icon-s-unfold"></i></el-radio-button>
				<el-radio-button :label="true" style="width: 100px;"><i
						style="width: 100px;height: 40px;display: flex;justify-content: left;align-items: center;font-size: 30px;"
						class="el-icon-s-fold"></i></el-radio-button>
			</el-radio-group>
			<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
				:collapse="isCollapse" router="true">


				<el-menu-item index="/EnteroriseService.vue">
					<i class="el-icon-user"></i>
					<span slot="title">企业服务</span>
				</el-menu-item>
				<el-menu-item index="/Cooperate.vue">
					<i class="el-icon-menu"></i>
					<span slot="title">商务合作</span>
				</el-menu-item>
				<el-menu-item index="/ContactUs.vue">
					<i class="el-icon-phone"></i>
					<span slot="title">联系我们</span>
				</el-menu-item>
				<el-menu-item index="/CommonProblem.vue">
					<i class="el-icon-tickets"></i>
					<span slot="title">常见问题</span>
				</el-menu-item>

			</el-menu>
		</el-aside>
		<!-- 右侧主区域 -->
		<el-container class="aa">
			<!-- 头部区域 -->
			<el-header>
				<div><strong>关于我们</strong></div>
			</el-header>
			<!-- 中间区域 -->
			<el-main>
				<div style="width: 1200px; height: 635px;border: 1px">
					<router-view></router-view>
				</div>

			</el-main>
			<!-- 底部区域 -->
			<!-- <el-footer>大事件 ©2023 Created by </el-footer> -->
		</el-container>

	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: true
			};
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style scoped>
	@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 200px;
	}

	.el-header {
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.layout-container {
		height: 100vh;

		.el-aside {
			background-color: #232323;

			.el-menu {
				border-right: none;
			}
		}
	}

	.aa {
		background-image: url('image/beijing.jpg');
		background-size: 100%;
	}
</style>